<template>
  <div>
      <div :to="{ path: '/sys-web/firstpage/first'}" class="scroll">
        <div style="width: 1200px;margin: 0 auto;float: right">
          <el-row :gutter="24">
            <el-col>
              <!--<el-carousel height="300px">
                  <el-carousel-item v-for="item in bannerArr">
                      <img :src="item.url" width="100%" height="100%" alt="">
                  </el-carousel-item>
              </el-carousel>-->
              <el-carousel :interval="4000" type="card" height="250px">
                <el-carousel-item v-for="item in bannerArr" style="width: 600px">
                  <img :src="item.url" width="100%" height="100%" alt="">
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
          <!--商品列表开始-->
          <el-row :gutter="20">
            <el-col style="margin-top: 20px" :span="6" v-for="p in productArr">
              <el-card style="height: 320px">
                <a :href="'/detail.html'">
                  <img class="p_img" :src="p.url" width="100%" alt="">
                </a>
                <div>
                  <a :href="'/detail.html'">
                    <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
                  </a>
                  <div style="color: #666">
                    <span>￥{{p.price}}</span>
                    <s style="font-size: 12px">{{p.oldPrice}}</s>
                    <span style="float: right">销量:{{p.saleCount}}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div style="margin-left: 430px">
            <el-pagination
                background
                :page-size="5"
                :pager-count="5"
                layout="prev, pager, next"
                :total="100">
            </el-pagination>
          </div>
          <!--商品列表结束-->
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookTypeArr: [],
      topArr: [{title: "三国演义", saleCount: 200}, {title: "红楼梦", saleCount: 100}],
      bannerArr: [{id: 1, url: "imgs/index_ad.jpg"}, {id: 2, url: "imgs/index_ad0.jpg"}, {id: 3, url: "imgs/b1.jpg"}],
      productArr: [{
        title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
        price: 233,
        oldPrice: 598,
        url: "imgs/a.jpg",
        saleCount: 2342
      },
        {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "imgs/b.jpg", saleCount: 2342},
        {title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins", price: 233, oldPrice: 598, url: "imgs/c.jpg", saleCount: 2342},
        {title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬", price: 233, oldPrice: 598, url: "imgs/d.jpg", saleCount: 2342},
        {title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins", price: 233, oldPrice: 598, url: "imgs/e.jpg", saleCount: 2342},
        {title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣", price: 233, oldPrice: 598, url: "imgs/f.jpg", saleCount: 2342},
        {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "imgs/g.jpg", saleCount: 2342},
        {title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "imgs/h.jpg", saleCount: 2342},
        {title: "imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套", price: 233, oldPrice: 598, url: "imgs/i.jpg", saleCount: 2342},
        {title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣", price: 233, oldPrice: 598, url: "imgs/j.jpg", saleCount: 2342},
        {title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外", price: 233, oldPrice: 598, url: "imgs/k.jpg", saleCount: 2342},
        {title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔", price: 233, oldPrice: 598, url: "imgs/a.jpg", saleCount: 2342}],
    }
  },
  methods: {

  }
}
</script>

<style>

.el-table .el-table__cell{
  padding: 0;/*去掉表格中每一行自带的内边距*/
}
.el-pagination{
  padding: 10px 5px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.p_img:hover{
  position: relative;
  top: 5px;
  /*设置元素阴影:x偏移值  y偏移值  浓度  范围   颜色*/
  box-shadow: 0 0 15px 5px #333;
}
.el-main a{
  color: black;
  text-decoration: none;
}
.el-main a:hover{
  color: #666;
}

.scroll{
  width: 100%;
  height: 100%;

  overflow-y:scroll;

}
::-webkit-scrollbar{display:none}
.el-main{
  margin: 0;
}
</style>